<!--
 * @Author: your name
 * @Date: 2021-03-22 22:32:52
 * @LastEditTime: 2021-04-23 23:23:15
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \guzheng\src\component\index-main.vue
-->
<template>
  <div>
  <div>一筝一世界</div>
      <el-carousel :interval="4000" type="card" height="300px">
      <el-carousel-item v-for="item in imagebox" :key="item.id">
         <img :src="item.idView" class="image">
      </el-carousel-item>
    </el-carousel>
    <div class="middle-bg"></div>
    <div class="link">
      <el-link href="https://www.guzheng.cn/" target="_blank" type="primary">中国古筝网</el-link>
      <el-link href="http://gz.bjguoyue.com/videos/yanzou/" target="_blank" type="primary">国乐网</el-link>
      <el-link href="https://www.icourse163.org" target="_blank" type="primary">中国大学MOOC</el-link>
      <el-link href="http://pu.guqu.net/" target="_blank" type="primary">中国民乐曲谱</el-link>
    </div>
  </div>
</template>

<script>
export default {
   name:'zmd',
  name: "index-main",
  data() {
    return {
     imagebox:[
        {id:0,idView:require('../assets/images/29.jpg')},
        {id:1,idView:require('../assets/images/27.jpg')},
        {id:2,idView:require('../assets/images/30.jpg')},
        {id:3,idView:require('../assets/images/31.jpg')},
        {id:4,idView:require('../assets/images/37.jpg')},
        {id:5,idView:require('../assets/images/38.jpg')},
        {id:6,idView:require('../assets/images/33.jpg')},
        {id:7,idView:require('../assets/images/19.jpg')}
        ],
         // 图片父容器高度
        zmdHeight :700,
        // 浏览器宽度
        screenWidth :0
    };
  },
  methods: {
    setSize:function () {
                // 通过浏览器宽度(图片宽度)计算高度
                this.bannerHeight = 400 / 1920 * this.screenWidth;
              },
            },
          mounted() {
              // 首次加载时,需要调用一次
              this.screenWidth =  window.innerWidth;
              this.setSize();
              // 窗口大小发生改变时,调用一次
              window.onresize = () =>{
              this.screenWidth =  window.innerWidth;
              this.setSize();
            }
          },
  };
</script>

<style scoped>
.el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
}

.link {
  display: flex;
  justify-content: space-between;
  padding: 20px;
  z-index: 99;
}
a {
  margin: 0 20px;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
img{
     /*设置图片宽度和浏览器宽度一致*/
      width:100%;
      height:inherit;
    }

.middle-bg
 {
  width:100%;
  height: 60px;
  opacity: 0.05;
  background-image: url('../assets/images/36.jpg');
  background-position: center;
  background-repeat: no-repeat;
}

</style>